<template>
	<div class="content">
		<el-scrollbar class="content-scrollbar">
			<div class="set-header-title flex">
				<h3>员工反馈设置</h3>
				<span class="px12 text-placeholder">关闭后员工不能进行反馈</span>
			</div>
			<div class="set-content">
				<el-switch
					v-model="info.feedbackSettings"
					active-color="#13ce66"
					inactive-color="#ff4949"
					:active-value="switchValue.activeValue"
					:inactive-value="switchValue.inactiveValue"
					@change="handleFeedbackSettings"
				></el-switch>
			</div>

			<br />

			<div class="set-header-title flex">
				<h3>工资条自动确认设置</h3>
				<span class="px12 text-placeholder">开启后可设置工资自动确认规则</span>
			</div>
			<div class="set-content">
				<el-switch
					v-model="info.autoConfirmationSettings"
					active-color="#13ce66"
					inactive-color="#ff4949"
					:active-value="switchValue.activeValue"
					:inactive-value="switchValue.inactiveValue"
					@change="handleAutoConfirmationSettings"
				></el-switch>
				<div class="set-desc">
					工资发放第
					<el-input
						v-model.number="info.autoConfirmationDays"
						type="primary"
						style="width: 60px;"
						@blur="handleAutoConfirmationDaysBlur"
					></el-input>
					天，自动确认
				</div>
			</div>

			<br />

			<div class="set-header-title flex">
				<h3>工资条确认提醒规则设置</h3>
				<span class="px12 text-placeholder">
					设置后可定期收到一条工资条确认提醒消息
				</span>
			</div>
			<div class="set-content">
				<template v-for="(item, index) in info.payrollConfirmReminders">
					<div class="set-desc" :key="index" :class="{ active: item.active }">
						工资条发送后第
						<el-input
							v-model.number="item.reminderDay"
							type="primary"
							style="width: 60px;"
							@focus="reminderDayFocus(item, index)"
						></el-input>
						天提醒员工
						<el-button
							v-if="item.active"
							class="fr"
							type="primary"
							@click="handleOnOkPayrollConfirmReminders(item, index)"
						>
							确定
						</el-button>
						<el-popconfirm
							v-else-if="!item.active"
							confirmButtonText="确定"
							cancelButtonText="取消"
							icon="el-icon-info"
							iconColor="red"
							title="删除该确认提醒规则吗？"
							@onConfirm="handleDeletePayrollConfirmReminders(item, index)"
						>
							<el-button slot="reference" class="fr" type="danger" plain>
								删除
							</el-button>
						</el-popconfirm>
					</div>
				</template>
				<el-button
					type="primary"
					icon="el-icon-plus"
					plain
					@click="handleAddPayrollConfirmReminders"
				>
					新增
				</el-button>
			</div>

			<br />

			<div class="set-header-title flex">
				<h3>工资条发放提醒</h3>
				<span class="px12 text-placeholder">
					设置后可定期收到一条工资条确认提醒消息
				</span>
			</div>
			<div class="set-content">
				<template v-for="(item, index) in info.payrollGrantReminders">
					<div class="set-desc" :key="index" :class="{ active: item.active }">
						发放日期： 每月
						<el-select
							v-model.number="item.monthlyWageDays"
							style="width: 60px; margin-right: 10px;"
							@focus="monthlyWageDaysFocus(item, index)"
						>
							<el-option v-for="day in 31" :key="day" :label="day" :value="day"></el-option>
						</el-select>
						日， 提前
						<el-input
							v-model.number="item.reminderDay"
							type="primary"
							style="width: 60px;"
							@focus="monthlyWageDaysFocus(item, index)"
						></el-input>
						天提醒我
						<el-button
							v-if="item.active"
							class="fr"
							type="primary"
							@click="handleOnOkdPayrollGrantReminders(item, index)"
						>
							确定
						</el-button>
						<el-popconfirm
							v-else-if="!item.active"
							confirmButtonText="确定"
							cancelButtonText="取消"
							icon="el-icon-info"
							iconColor="red"
							title="删除该发放提醒吗？"
							@onConfirm="handleDeletePayrollGrantReminders(item, index)"
						>
							<el-button slot="reference" class="fr" type="danger" plain>
								删除
							</el-button>
						</el-popconfirm>
					</div>
				</template>
				<el-button type="primary" icon="el-icon-plus" plain @click="handleAddPayrollGrantReminders">
					新增
				</el-button>
			</div>
		</el-scrollbar>
	</div>
</template>

<script>
import { mapActions } from 'vuex'

import {
	postPayrollSetFeedbackSettings,
	postPayrollSetAutoConfirmationSettings,
	postPayrollSetAutoConfirmationDays,
	postPayrollConfirmReminderAdd,
	postPayrollConfirmReminderEdit,
	postPayrollConfirmReminderRemove,
	postPayrollGrantReminderAdd,
	postPayrollGrantReminderEdit,
	postPayrollGrantReminderRemove
} from '@/APIs/index/index'
export default {
	name: 'PaySlipSetting',
	data() {
		return {
			info: {
				payrollConfirmReminders: [],
				payrollGrantReminders: []
			},
			switchValue: {
				activeValue: 0,
				inactiveValue: 1
			}
		}
	},
	mounted() {
		this.postPayrollSetInfoData()
	},
	methods: {
		...mapActions(['handleSetPayrollInfo']),
		async postPayrollSetInfoData() {
			const data = await this.handleSetPayrollInfo()
			this.info = data
		},
		async handleFeedbackSettings(val) {
			try {
				const feedbackSettings = val
				const { code } = await postPayrollSetFeedbackSettings({ feedbackSettings })
				code > 0 ? (this.info.feedbackSettings = val === 0 ? 1 : 0) : null
			} catch (error) {
				this.postPayrollSetInfoData()
				throw new Error(error)
			}
		},
		async handleAutoConfirmationSettings(val) {
			try {
				const autoConfirmationSettings = val
				const { code } = await postPayrollSetAutoConfirmationSettings({ autoConfirmationSettings })
				code > 0 ? (this.info.autoConfirmationSettings = val === 0 ? 1 : 0) : null
			} catch (error) {
				this.postPayrollSetInfoData()
				throw new Error(error)
			}
		},
		async handleAutoConfirmationDaysBlur() {
			try {
				const autoConfirmationDays = this.info.autoConfirmationDays
				const { code } = await postPayrollSetAutoConfirmationDays({ autoConfirmationDays })
				if (code > 0) this.postPayrollSetInfoData()
			} catch (error) {
				this.postPayrollSetInfoData()
				throw new Error(error)
			}
		},
		handleAddPayrollConfirmReminders() {
			this.info?.payrollConfirmReminders.push({ isAdd: true, reminderDay: 0, active: true })
		},
		reminderDayFocus(item, index) {
			this.$set(this.info.payrollConfirmReminders, index, {
				...this.info.payrollConfirmReminders[index],
				active: true,
				isAdd: item?.spcrId === undefined
			})
		},
		async handleDeletePayrollConfirmReminders(data, index) {
			const { spcrId: ids } = data
			if (ids) {
				const { code } = await postPayrollConfirmReminderRemove({ ids })
				if (code === 0)
					this.info.payrollConfirmReminders = this.info?.payrollConfirmReminders.filter(
						({ spcrId }) => spcrId === ids
					)
			} else {
				this.info.payrollConfirmReminders.splice(index, 1)
			}
		},
		async handleOnOkPayrollConfirmReminders(data, index) {
			const { reminderDay: days, spcrId, reminderDay, isAdd } = data
			const { code, data: resData } = isAdd
				? await postPayrollConfirmReminderAdd({ days })
				: await postPayrollConfirmReminderEdit({ spcrId, reminderDay })
			if (code === 0 && isAdd) {
				this.$set(this.info.payrollConfirmReminders, index, { ...resData })
			} else {
				this.postPayrollSetInfoData()
			}
		},
		handleAddPayrollGrantReminders() {
			this.info.payrollGrantReminders.push({
				isAdd: true,
				active: true,
				reminderDay: 0,
				payrollGrantReminders: 1
			})
		},

		monthlyWageDaysFocus(item, index) {
			console.log(item)
			this.$set(this.info.payrollGrantReminders, index, {
				...this.info.payrollGrantReminders[index],
				active: true,
				isAdd: item?.spcrId === undefined
			})
		},
		async handleDeletePayrollGrantReminders(data, index) {
			const { spcrId: ids } = data
			if (ids) {
				const { code } = await postPayrollGrantReminderRemove({ ids })
				if (code === 0)
					this.info.payrollGrantReminders = this.info?.payrollGrantReminders.filter(
						({ spcrId }) => spcrId === ids
					)
			} else {
				this.info.payrollGrantReminders.splice(index, 1)
			}
		},
		async handleOnOkdPayrollGrantReminders(data, index) {
			const { spgrId, monthlyWageDays, reminderDay, isAdd } = data
			const { code, data: resData } = isAdd
				? await postPayrollGrantReminderAdd({ monthlyWageDays, reminderDay })
				: await postPayrollGrantReminderEdit({ spgrId, monthlyWageDays, reminderDay })
			if (code === 0) {
				this.$set(this.info.payrollGrantReminders, index, { ...resData })
			} else {
				this.postPayrollSetInfoData()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	.set-header-title {
		background: #fafbfc;
		position: relative;
		padding-left: 10px;
		line-height: 32px;
		margin: 10px;
		&::before {
			content: ' ';
			width: 2px;
			height: 100%;
			display: block;
			position: absolute;
			left: 0;
			background-color: #c5cdd6;
		}
		h3 {
			margin-right: 20px;
		}
	}
	.set-content {
		margin: 20px;
		.set-desc {
			margin: 20px 0;
			background-color: #ebf2f8;
			padding: 20px;
			&.active {
				border: 1px solid #c4cdd6;
				border-left: 4px solid #79abd2;
				box-shadow: 0px 0px 8px rgba(66, 121, 172, 0.2);
			}
		}
	}
}
</style>
